UNIVERSITY  OF  MICHIGAN  **  SCHOOL  OF  INFORMATION 

SI  539:  Design  of  Complex  Web  Sites 

Assignment  3 - Tables  and  Forms 


Due  Date:  Tuesday  January  29,  2008  at  11:55PM 

Overview 


This  assignment  will  explore  CSS  in  more  detail  and  add  a table  and  form  to  your  project.  This 
assignment  builds  on  Assignment  2.  Here  are  a few  screenshots  to  show  some  examples  of  what  you 
will  accomplish. 
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About  Contact  Pictures  Membership  Application 


relcome  to  the  SI539  Sample  Site 


Here  are  two  quotes  from  Ghandi  that  look  at  power  from  different 
perspectives  but  reach  the  same  conclusion. 

Power  is  of  two  kinds.  One  is  obtained  by  the  fear  of 
punishment  and  the  other  by  acts  of  love.  Power  based  on 
love  is  a thousand  times  more  effective  and  permanent  then 
the  one  derived  from  fear  of  punishment. 

Power  is  of  two  kinds.  One  is  obtained  by  the  fear  of 
punishment  I hope  to  demonstrate  that  the  real  swaraj  will 
come  not  by  the  acquisition  of  authority  by  a few,  but  by  the 
acquisition  of  the  capacity  by  all  to  resist  authority,  when 
abused. 


About  Contact  Pictures  Membership  Application 


1539  Membership  List 


These  are  the  members  of  SI539  who  are  in  good  standing  and  have 
paid  all  their  dues. 


Name 

E-Mail 

Start  Date 

Ruby  Rails 

ruby@si539.com 

2006 

Robby  CSS 

robby@si539.com 

2004 

Harriet  HTML 

harriet@si539.com 

2004 

If  you  think  there  is  an  error  in  the  above  send  mail  to 
membership@si539.com. 
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Your  membership  will  be  considered  at  the  next  board  meeting.  This 
may  take  up  to  three  months.  To  check  on  the  status  of  your 
application,  please  contact,  membership@si539.com. 


Deliverables 


Your  HTML  and  CSS  should  continue  to  validate.  You  should  keep  the  pages  from  the  previous 
assignment  and  add  three  more  pages: 

A membership  page  that  contains  a table  - style  the  table  using  the  sample  on  page  23 1 of  the  book. 
You  can  pick  different  colors,  etc  - just  don’t  leave  the  style  default  and  at  least  add  a border  and 
make  the  header  look  different  than  the  data  rows. 

A join  page  that  contains  a form  with  a fieldset  and  legend  (page  253)  and  two  input  fields  and  a 
submit  button  as  shown  above.  You  can  leave  the  form  styling  as  default  if  you  like.  The  form 
should  use  the  get  method  (page  251)  and  should  submit  the  data  to  a third  HTML  file  that  thanks 
them  for  their  submission  and  gives  them  a link  back  to  the  index.htm  page. 

Other  Deliverables 

Switch  the  navigation  list  from  being  block  to  being  inline  (they  will  end  up  all  on  the  same  line). 

In  each  file,  add  a class=”selected”  to  the  current  page.  This  will  allow  you  to  separately  style  the 
selected  button  so  that  it  will  stand  out  from  the  other  navigation  elements  and  give  the  user  some 
feedback  as  to  which  page  they  are  currently  on.  Add  styling  in  your  CSS  to  make  the  selected  link 
stand  out.  Here  is  some  CSS  and  HTML  that  you  might  find  useful: 

<li><a  href=”index.htm”>About</a></li> 

<li><a  href="contact.htm"  class="selected">Contact</a></li> 

<li><a  href="pictures.htm">Pictures</a></li> 

<li><a  href="members.htm">Membership</a></li> 

<li><a  href="join.htm">Application</a></li> 

#navigation  li  { 
display:  inline; 

} 

#navigation  li  .selected  { 
background-color:  grey; 

} 

You  can  style  this  differently  if  you  like  - the  deliverable  is  to  distinguish  the  selected  page  in  the 
navigation. 

Hand  In 

You  should  hand  the  following  in  using  CTools: 

S A screen  shot  of  each  of  the  three  new  screens. 

S A screen  shot  of  one  of  your  HTML  pages  validating  at  the  HTML  validator. 


